<!doctype html>
<html lang="en" class="fullscreen-bg">

<head>
	<title>修改密码</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="{{ url_for('static', filename='cms/assets/css/bootstrap.min.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='cms/assets/vendor/font-awesome/css/font-awesome.min.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='cms/assets/vendor/linearicons/style.css') }}">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="{{ url_for('static', filename='cms/assets/css/main.css') }}">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="{{ url_for('static', filename='cms/assets/css/demo.css') }}">
	<!-- GOOGLE FONTS -->
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="{{ url_for('static', filename='cms/assets/img/apple-icon.png') }}">
	<link rel="icon" type="image/png" sizes="96x96" href="{{ url_for('static', filename='cms/assets/img/favicon.png') }}">

    <script src="{{ url_for('static', filename='cms/assets/vendor/jquery/jquery.js') }}" type="text/javascript"></script>
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<div class="vertical-align-wrap">
			<div class="vertical-align-middle">
				<div class="auth-box ">
					<div class="left">
						<div class="content">
							<div class="header">
								<div class="logo text-center"><img src="{{ url_for('static', filename='cms/assets/img/logo-dark.png') }}" alt="Klorofil Logo"></div>
								<p class="lead">账号</p>
							</div>
							<form class="form-auth-small" method="post">
								<div class="form-group">
									<label for="signin-email" class="control-label sr-only">用户名</label>
									<input type="text" class="form-control" id="signin-email" placeholder="{{ g.username }}" disabled="disabled">
								</div>
								<div class="form-group">
									<label for="signin-password" class="control-label sr-only">密码</label>
									<input type="password" class="form-control" id="password"  placeholder="密码" name="password" onblur="checkpas1();" required>
								</div>
								<div class="form-group">
									<label for="signin-password" class="control-label sr-only">确认密码</label>
									<input type="password" class="form-control" id="repassword"  placeholder="确认密码" name="repassword" required onchange="checkpas();">
                                    <span class="tip" style="color: red;">两次输入的密码不一致</span><br>
								</div>
								<button type="submit" class="btn btn-primary btn-lg btn-block" onclick="checkpas2();">登录</button>

							</form>
                            {% if message %}
                                <p style="text-align: center; margin-top: 15px" class="text-danger">{{ message }}</p>
                            {% endif %}
						</div>
					</div>
					<div class="right">
						<div class="overlay"></div>
						<div class="content text">
							<h1 class="heading">Free Bootstrap dashboard template</h1>
							<p>by The Develovers</p>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- END WRAPPER -->

<script>
            $(".tip").hide();
            function checkpas1(){//当第一个密码框失去焦点时，触发checkpas1事件
                var pas1=document.getElementById("password").value;
                var pas2=document.getElementById("repassword").value;//获取两个密码框的值
                if(pas1!=pas2&&pas2!="")//此事件当两个密码不相等且第二个密码是空的时候会显示错误信息
                    $(".tip").show();
                else
                    $(".tip").hide();//若两次输入的密码相等且都不为空时，不显示错误信息。
                }
            function checkpas(){//当第一个密码框失去焦点时，触发checkpas2件
                var pas1=document.getElementById("password").value;
                var pas2=document.getElementById("repassword").value;//获取两个密码框的值
                if(pas1!=pas2){
                    $(".tip").show();//当两个密码不相等时则显示错误信息
                }else{
                    $(".tip").hide();
                }
                }
            function checkpas2(){//点击提交按钮时，触发checkpas2事件，会进行弹框提醒以防无视错误信息提交
                var pas3=document.getElementById("password").value;
                var pas4=document.getElementById("repassword").value;
                if(pas3!=pas4){
                    alert("两次输入的密码不一致！");
                    return false;
                }
            }
        </script>
</body>

</html>
